<template>
	<view class="activity-section" v-if="activities.length > 0">
		<!-- 当前活动信息展示 -->
		<groupon-activity
			v-if="activityType === 'groupon'"
			:activity-type="activityType"
			:current-activity="currentActivity"
			@click="onActivityClick"
		></groupon-activity>
		<seckill-activity
			v-if="activityType === 'seckill'"
			:activity-type="activityType"
			:current-activity="currentActivity"
			@click="onActivityClick"
		></seckill-activity>
		<bargain-activity
			v-if="activityType === 'bargain'"
			:activity-type="activityType"
			:current-activity="currentActivity"
			@click="onActivityClick"
		></bargain-activity>
		<flashsale-activity
			v-if="activityType === 'flashsale'"
			:activity-type="activityType"
			:current-activity="currentActivity"
			@click="onActivityClick"
		></flashsale-activity>
		
		<!-- 其他活动列表 -->
		<view class="activity-item" v-for="(activity, index) in filteredActivities" :key="index"
			:class="{'activity-highlight': activity.id === currentActivityId}"
			@click="switchActivity(activity)">
			<view class="activity-tag" :class="'activity-tag-' + activity.type">{{ activity.typeText }}</view>
			<text class="activity-name">{{ activity.name }}</text>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue';
	import GrouponActivity from './types/groupon.vue';
	import SeckillActivity from './types/seckill.vue';
	import BargainActivity from './types/bargain.vue';
	import FlashsaleActivity from './types/flashsale.vue';
	
	const props = defineProps({
		activities: {
			type: Array,
			default: () => []
		},
		activityType: {
			type: String,
			default: 'normal'
		},
		currentActivityId: {
			type: Number,
			default: null
		}
	});
	
	const emit = defineEmits(['activity-switch', 'activity-click']);
	
	// 活动组件已通过v-if条件渲染方式实现
	
	// 当前活动信息
	const currentActivity = computed(() => {
		if (props.currentActivityId) {
			return props.activities.find(item => item.id === props.currentActivityId) || null;
		}
		return null;
	});
	
	// 过滤活动列表，不显示当前活动
	const filteredActivities = computed(() => {
		if (!props.currentActivityId) return props.activities;
		return props.activities.filter(activity => activity.id !== props.currentActivityId);
	});
	
	// 切换活动
	const switchActivity = (activity) => {
		emit('activity-switch', activity);
	};
	
	// 点击当前活动
	const onActivityClick = () => {
		emit('activity-click', currentActivity.value);
	};
</script>

<style lang="scss" scoped>
.activity-section {
	background-color: #fff;
	padding: 10px 15px;
	margin-bottom: 10px;

	.activity-item {
		display: flex;
		align-items: center;
		margin-bottom: 8px;
		padding: 5px 0;

		&:last-child {
			margin-bottom: 0;
		}

		&.activity-highlight {
			background-color: rgba(255, 106, 106, 0.05);
			border-radius: 4px;
			padding: 8px 10px;
		}

		.activity-tag {
			padding: 2px 6px;
			border-radius: 3px;
			font-size: 11px;
			color: white;
			margin-right: 8px;

			&.activity-tag-groupon {
				background-color: #ff6a6a;
			}

			&.activity-tag-seckill {
				background-color: #ff9500;
			}

			&.activity-tag-flashsale {
				background-color: #ff3b30;
			}

			&.activity-tag-coupon {
				background-color: #34c759;
			}

			&.activity-tag-bargain {
				background-color: #5856d6;
			}
		}

		.activity-name {
			font-size: 13px;
			color: #333;
		}
	}
}
</style>